<!DOCTYPE html>

<html lang="en">

<head>
    {% load static %}

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="">

    <meta name="author" content="">


    <title>我的小站</title>

    <!-- Bootstrap core CSS -->

    <link href="{% static '/desk/css/bootstrap.css' %}" rel="stylesheet">

    <!-- Add custom CSS here -->

    <link href="{% static '/desk/css/slidefolio.css' %}" rel="stylesheet">

    <!-- Font Awesome -->

    <link href="{% static '/desk/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">

</head>

<body>


<!-- Header Area -->

<div id="top" class="header">

</div>

<!-- /Header Area -->

<div id="nav">

    <!-- Navigation -->

    <nav class="navbar navbar-new col-lg-12" role="navigation">

        <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobilemenu">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a href="#" class="navbar-brand">我的小站</a>

            </div>

            <div class="collapse navbar-collapse" id="mobilemenu">


                <ul class="nav navbar-nav navbar-right text-center">

                    <li><a href="#top"><i class="service-icon fa fa-home"></i>&nbsp;Home</a></li>

                    <li><a href="#about"><i class="service-icon fa fa-info"></i>&nbsp;About</a></li>

                    <li><a href="#services"><i class="service-icon fa fa-laptop"></i>&nbsp;Services</a></li>

                    <li><a href="#portfolio"><i class="service-icon fa fa-camera"></i>&nbsp;Portfolio</a></li>

                    <li><a href="#contact"><i class="service-icon fa fa-envelope"></i>&nbsp;Contact</a></li>


                </ul>

            </div><!-- /.navbar-collapse -->

        </div>

    </nav>

    <!-- /Navigation -->

</div>

<!-- About -->

<div id="about" class="about_us">

    <div class="container">

        <div class="row">

            <div class="col-md-8 col-md-offset-2 text-center">

                <h2>我是谁？</h2>

                <p class="lead">我是一名摄影爱好者，用手中的机器，将瞬间美好定格。</p>

            </div>

        </div>


    </div>

    <!-- /About -->

    <!--div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div-->

    <!-- Services -->

    <div id="services" class="services">

        <div class="container">

            <div class="row">

                <div class="col-md-4 col-md-offset-4 text-center">

                    <h2>Our Services</h2>

                    <hr>

                </div>

            </div>

            <div class="row">

                <div class="col-md-4 text-center">

                    <div class="service-item">

                        <i class="service-icon fa fa-camera-retro fa-3x"></i>

                        <h3>Portrait</h3>

                        <p>Ad has dicat ridens consetetur, eos eu option persius. Mollis cotidieque conclusionemque per
                            id, ne nam alienum liberavisse. </p>

                    </div>

                </div>

                <div class="col-md-4 text-center">

                    <div class="service-item">

                        <i class="service-icon fa fa-camera fa-3x"></i>

                        <h3>Black & white</h3>


                        <p>In mea similique vulputate, ea cum amet malorum dissentiunt. Qui deleniti aliquando cu, ullum
                            soluta his an, id inani salutatus sit.</p>

                    </div>

                </div>

                <div class="col-md-4 text-center">

                    <div class="service-item">

                        <i class="service-icon fa fa-globe fa-3x"></i>

                        <h3>Web Design</h3>

                        <p>Ad has dicat ridens consetetur, eos eu option persius. Mollis cotidieque conclusionemque per
                            id, ne nam alienum liberavisse.</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- /Services -->


    <!-- Portfolio -->

    <div id="portfolio" class="portfolio">

        <div class="container">

            <div class="row push50">

                <div class="col-md-4 col-md-offset-4 text-center">

                    <h2>Our Work</h2>

                    <h3>

                        <span class="filter label label-default" data-filter="all">ALL</span>

                        <span class="filter label label-default" data-filter="bw">B&amp;W</span>

                        <span class="filter label label-default" data-filter="nature">Nature</span>

                        <span class="filter label label-default" data-filter="portraits">Portraits</span>

                    </h3>

                    <hr>

                </div>

            </div>


            <div class="row">


                <div class="gallery">


                    <ul id="Grid" class="gcontainer">

                        <li class="col-md-4 col-sm-4 col-xs-12 mix bw portraits" data-cat="graphics">

                            <a data-toggle="modal" data-target="#portrait1" class="mix-cover">

                                <img class="horizontal" src="{% static '/desk/img/portrait1-sm.jpg' %}"
                                     alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span class="title">Portrait 1</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="graphics">

                            <a data-toggle="modal" data-target="#portrait2" class="mix-cover">

                                <img class="horizontal" src="{% static '/desk/img/portrait2.jpg' %}" alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span class="title">Portrait 2</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix nature" data-cat="nature">

                            <a data-toggle="modal" data-target="#nature1" class="mix-cover">

                                <img class="horizontal" src="{% static '/desk/img/nature1.jpg' %}" alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span
                                        class="title">Nature 1</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portraits">

                            <a data-toggle="modal" data-target="#portrait3" class="mix-cover">

                                <img class="horizontal" src="{% static 'desk/img/portrait3.jpg' %}" alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span class="title">Portrait 3</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portraits">

                            <a data-toggle="modal" data-target="#portrait5" class="mix-cover">

                                <img class="horizontal" src="{% static 'desk/img/portrait5.jpg' %}" alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span class="title">Portrait 5</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix nature" data-cat="nature">

                            <a data-toggle="modal" data-target="#nature" class="mix-cover">

                                <img class="horizontal" src="{% static 'desk/img/nature.jpg' %}" alt="placeholder">

                                <span class="overlay"><span class="valign"></span><span
                                        class="title">Nature</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portrait">

                            <a data-toggle="modal" data-target="#portrait4" class="mix-cover green">

                                <img class="vertical" src="{% static 'desk/img/portrait4.jpg' %}" alt="portrait 4">

                                <span class="overlay"><span class="valign"></span><span class="title">Portrait 4</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix bw nature all" data-cat="portrait">

                            <a data-toggle="modal" data-target="#forest" class="mix-cover green">

                                <img class="vertical" src="{% static 'desk/img/forest.jpg' %}" alt="Forest">

                                <span class="overlay"><span class="valign"></span><span
                                        class="title">Forest</span></span>

                            </a>

                        </li>

                        <li class="col-md-4 col-sm-4 col-xs-12 mix bw nature all" data-cat="bw">

                            <a data-toggle="modal" data-target="#bw1" class="mix-cover green">

                                <img class="vertical" src="{% static 'desk/img/bw1.jpg' %}" alt="Black and White">

                                <span class="overlay"><span class="valign"></span><span
                                        class="title">Black &amp; White</span></span>

                            </a>

                        </li>

                    </ul>


                    <!-- Load Photo in Modal -->

                    <div class="modal fade" id="portrait1" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Portrait 1</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="Portrait1" src="{% static 'desk/img/portrait1.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="portrait2" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Portrait 2</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="Portrait1" src="{% static 'desk/img/portrait2.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="portrait3" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Portrait 3</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="Portrait1" src="{% static 'desk/img/portrait3.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="portrait4" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Portrait 4</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="Portrait1" src="{% static 'desk/img/portrait4.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="portrait5" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Portrait 5</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="Portrait1" src="{% static 'desk/img/portrait5.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="nature" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Nature</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="nature" src="{% static 'desk/img/nature.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="nature1" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Nature 1</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="nature" src="{% static 'desk/img/nature1.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="forest" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Forest</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="forest" src="{% static 'desk/img/forest.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <div class="modal fade" id="bw1" tabindex="-1" role="dialog" aria-hidden="true">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                    <h4 class="modal-title text-center">Black and White</h4>

                                </div>

                                <div class="modal-body">

                                    <img class="thumbnail" alt="forest" src="{% static 'desk/img/bw1.jpg' %}"/>

                                </div>

                            </div><!-- /.modal-content -->

                        </div><!-- /.modal-dialog -->

                    </div><!-- /.modal -->


                    <!-- /Load Photo in Modal -->

                </div>

            </div>

        </div>

    </div>

    <!-- /Portfolio -->

    <!-- Contact -->

    <div id="contact">

        <div class="container"></div>

    </div>

    <!-- /Contact -->

    <!-- Footer -->

    <footer>

        <div class="container">

            <div class="row">

                <div class="col-md-6 col-md-offset-3 text-center">

                    <h2>Thank You</h2>

                    <em>Copyright &copy; Company 2013</em>

                </div>

            </div>

        </div>

    </footer>

    <!-- /Footer -->

    <!-- Bootstrap core JavaScript -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="{% static '/desk/js/jquery.js' %}"></script>

    <script src="{% static '/desk/js/jquery-scrolltofixed-min.js' %}"></script>

    <script src="{% static '/desk/js/jquery.vegas.js' %}"></script>

    <script src="{% static '/desk/js/jquery.mixitup.min.js' %}"></script>

    <script src="{% static '/desk/js/jquery.validate.min.js' %}"></script>

    <script src="{% static '/desk/js/script.js' %}"></script>

    <script src="{% static '/desk/js/bootstrap.js' %}"></script>


    <!-- Slideshow Background  -->

    <script>

        $.vegas('slideshow', {

            delay: 5000,

            backgrounds: [

                {
                    src: "https://images.unsplash.com/photo-1617719787657-81dd0ec1d3ce?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80",
                    fade: 2000
                },

                {
                    src: "https://images.unsplash.com/photo-1617719787803-f2f6e0bd454e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80",
                    fade: 2000
                },

                {
                    src: "https://images.unsplash.com/photo-1617719787321-0672e21eac0a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80",
                    fade: 2000
                },

                {src: "{% static '/desk/img/portrait5.jpg'%}", fade: 2000},

                {src: "{% static '/desk/img/portrait2.jpg'%}", fade: 2000},

                {src: "{% static '/desk/img/portrait3.jpg'%}", fade: 2000},

                {src: 'http://q7jniv3lx.bkt.clouddn.com/IMGP2938.JPG', fade: 2000},

                {src: "{% static '/desk/img/forest.jpg'%}", fade: 2000}


            ]

        })('overlay', {

            src: "{% static '/desk/img/overlay.png'%}"

        });


    </script>

    <!-- /Slideshow Background -->


    <!-- Mixitup : Grid -->

    <script>

        $(function () {

            $('#Grid').mixitup();

        });

    </script>

    <!-- /Mixitup : Grid -->


    <!-- Custom JavaScript for Smooth Scrolling - Put in a custom JavaScript file to clean this up -->

    <script>

        $(function () {

            $('a[href*=#]:not([href=#])').click(function () {

                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')

                    || location.hostname == this.hostname) {


                    var target = $(this.hash);

                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

                    if (target.length) {

                        $('html,body').animate({

                            scrollTop: target.offset().top

                        }, 1000);

                        return false;

                    }

                }

            });

        });

    </script>

    <!-- Navbar -->

    <script type="text/javascript">

        $(document).ready(function () {

            $('#nav').scrollToFixed();

        });

    </script>

    <!-- /Navbar-->


</body>


</html>